import React, { useState, useEffect } from "react";

const HookRule = () => {
  // 1. 使用name状态变量
  const [name, setName] = useState("Mary");
  // 2. 保存name到localStorage
  // 错误演示
  // if (name !== "") {
  //   // eslint-disable-next-line
  //   useEffect(function persistForm() {
  //     localStorage.setItem("formData", name);
  //   });
  // }
  // 正确演示
  useEffect(function persistForm() {
    if (name !== "") {
      localStorage.setItem("formData", name);
    }
  });
  
  // 3. 使用别名状态变量
  const [nickname, setNickname] = useState("Poppins");

  // 4. 更新页面标题栏
  useEffect(function updateTitle() {
    document.title = name + " " + nickname;
  });

  return <button onClick={() => setName("")}>Hook Rule</button>;
};

export default HookRule;
